import React, { Component } from 'react';
import { LoginContair, LoginFrom } from './LoginStyle'
import { Button } from 'antd-mobile'
import http from '../../../utils/http'
import cookie from 'react-cookies'
import md5 from 'md5'
import { MaskBox, Dialog } from '../register/RegisterStyle'


class Login extends Component {
    constructor() {
        super()
        this.state = {
            loginStyleFlag: true,
            input1Value: '',
            input1Flag: false,
            input2Value: '',
            input2Flag: false,
            loginMaskFlag: false,
            loginMaskText: ''
        }
    }

    switchLoginStyle = () => {
        this.setState({
            loginStyleFlag: !this.state.loginStyleFlag
        })
    }

    changeInput1 = (e) => {
        this.setState({
            input1Value: e.target.value
        })
        if (e.target.value !== '') {
            this.setState({
                input1Flag: true
            })
        } else {
            this.setState({
                input1Flag: false
            })
        }
    }

    changeInput2 = (e) => {
        this.setState({
            input2Value: e.target.value
        })
        if (e.target.value !== '') {
            this.setState({
                input2Flag: true
            })
        } else {
            this.setState({
                input2Flag: false
            })
        }
    }

    loginSubmit = async () => {
        if (this.state.input1Value !== '' && this.state.input2Value !== '') {
            const result = await http({
                url: 'http://localhost:9000/login',
                data: {
                    username: this.state.input1Value,
                    password: this.state.input2Value,
                    token: ''
                },
                method: 'POST'
            })
            if (result.data.status === 1) {
                this.setState({
                    loginMaskFlag: true,
                    loginMaskText: '您输入的用户名不存在!'
                })
            } else if (result.data.status === 2) {
                this.setState({
                    loginMaskFlag: true,
                    loginMaskText: '您输入的密码有误!'
                })
            } else if (result.data.status === 3) {
                this.setState({
                    loginMaskFlag: false,
                    loginMaskText: ''
                })
                cookie.save('username', this.state.input1Value, { path: '/' })
                cookie.save('password', md5(this.state.input2Value), { path: '/' })
                const { push } = this.props.history
                push('/mine')
            }
        }
    }

    knowMask = () => {
        this.setState({
            loginMaskFlag: false
        })
    }

    render() {
        return (
            <LoginContair>
                {
                    this.state.loginMaskFlag &&
                    <MaskBox>
                        <Dialog>
                            <span>{this.state.loginMaskText}</span>
                            <Button type="warning" onClick={this.knowMask}>我知道了</Button>
                        </Dialog>
                    </MaskBox>
                }
                <LoginFrom>
                    <div className="login_outer">
                        <span>{this.state.loginStyleFlag && '使用聚美账号登录' || '使用手机登录'}</span>
                    </div>
                    <div className="login_content">
                        {this.state.loginStyleFlag
                            &&
                            <div className="account_login">
                                <input type="text" placeholder="已注册的用户名" onChange={this.changeInput1} />
                                <input type="password" placeholder="6-16位登陆密码" onChange={this.changeInput2} />
                            </div>
                            ||
                            <div className="tel_login">
                                <input type="text" placeholder="请输入11位手机号" />
                                <div>
                                    <input type="text" placeholder="请输入短信验证码" />
                                    <a>验证</a>
                                </div>
                            </div>
                        }
                        <div className="login_info">
                            <a className="login_style" onClick={this.switchLoginStyle}>
                                {this.state.loginStyleFlag && '使用手机验证码登录' || '使用聚美账号登录'}
                            </a>
                            <a className="login_forgetpassword">忘记密码？</a>
                        </div>
                        {
                            this.state.input1Flag && this.state.input2Flag
                            && <Button type="warning" onClick={this.loginSubmit}>登录</Button>
                            || <Button type="warning" disabled>登录</Button>
                        }
                    </div>
                </LoginFrom>
            </LoginContair>
        )
    }
}

export default Login